<script setup>
import HomeBanner from './components/HomeBanner.vue'
import HomeCategory from './components/HomeCategory.vue'
import HomeCampus from './components/HomeCampus.vue'
import HomeNew from './components/HomeNew.vue'
import HomeHotStore from './components/HomeHotStore.vue'
import { ref, onMounted } from 'vue'
import { getHomeDataApi } from '@/api/home.js'

const categoryList = ref([])
const campusList = ref([])
const shopList = ref([])
const getHomeList = async () => {
  const res = await getHomeDataApi()
  categoryList.value = res.data['vehicleList']
  campusList.value = res.data['campusList']
  shopList.value = res.data['shopList']
}

onMounted(() => getHomeList())
</script>
<template>
  <HomeBanner></HomeBanner>
  <div class="area1">
    <div class="container">
      <HomeCategory :categoryList="categoryList"></HomeCategory>
      <HomeCampus :campusList="campusList"></HomeCampus>
    </div>
  </div>
  <div class="container">
    <HomeNew></HomeNew>
    <HomeHotStore :shopList="shopList"></HomeHotStore>
  </div>
</template>
<style lang="scss" scoped>
.area1 {
  background-color: #fff;
  .container {
    position: relative;
    top: -30px;

    background-color: #fff;
    border-radius: 15px 15px 0 0;
  }
}
</style>
